<template>
  <el-dialog
    :title="title ? '策略编辑':'新增策略'"
    :visible.sync="showBlogForm"
    custom-class="mini-dialog dialog-style" :close-on-click-modal="false"
    @closed="closeClear">
    <!--label-width="80px" 依照標題字數去設-->
      <el-form :model="ruleForm" :rules="rules" class="form" size="small" ref="ruleForm" v-loading="loading"
                   element-loading-customClass="loadingClass" element-loading-spinner="dafa-icon-loading01 dafa-icon" @keyup.native.enter="submitForm('ruleForm')" @submit.native.prevent>
        <el-form-item label="策略名称" prop="name">
          <el-input v-model.trim="ruleForm.name" placeholder="请输入策略名称"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" prop="username">
          <el-select v-model="ruleForm.userIds"  multiple placeholder="请选择投注账号">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.userAccount"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投注金额(底)" prop="bettingAmount">
          <el-input v-model.trim="ruleForm.bettingAmount" placeholder="请输入押注底"></el-input>
        </el-form-item>
        <el-form-item label="有效时段" prop="time">
          <el-input v-model="ruleForm.time" placeholder="请输入有效时间段,格式：00:00 01:00, 03:04 05:00"></el-input>
        </el-form-item>
        <el-form-item label="连开次数" prop="factor">
          <el-input v-model="ruleForm.factor" type="number"></el-input>
        </el-form-item>
        <el-form-item label="中断次数" prop="interrupt">
          <el-input v-model="ruleForm.interrupt"  placeholder="请输入中断次数"></el-input>
        </el-form-item>
        <el-form-item label="自定义投注" prop="quotaAmount">
          <el-input v-model="ruleForm.quotaAmount" placeholder="(英文,符号隔开)5,20,40,50"></el-input>
        </el-form-item>
        <el-form-item label="Test" prop="test">
          <el-radio-group  v-model="ruleForm.test" :size="screenW > 768 ? 'mini':'medium'">
            <el-radio-button :label="true">是</el-radio-button>
            <el-radio-button :label="false">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    <!--    footer-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeClear" size="mini">取 消</el-button>
        <el-button :disabled="submitLoading" type="primary" size="mini" @click.stop="submitForm('ruleForm')" :loading="submitLoading"> 确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
import Api from '@/api/base'
import ApiUser from '@/api/users'
// import {checkNotHttp} from '@/utils/validate'
export default {
  data () {
    return {
      title: false,
      showBlogForm: false,
      loading: false,
      submitLoading: false,
      options: [],
      ruleForm: {
        name: '',
        userIds: '',
        bettingAmount: 2,
        time: '',
        factor: 2,
        interrupt: 4,
        quotaAmount: '',
        test: true
      },
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        userIds: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        time: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        bettingAmount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        effectiveTime: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        factor: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        interrupt: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: Boolean,
    data: Object
  },
  computed: {
    screenW () {
      return 1024
    }
  },
  created () {
    this.getBetUser()
  },
  methods: {
    getBetUser () {
      let parame = {
        page: 1,
        size: 100
      }
      ApiUser.getUserList(parame).then((res) => {
        this.options = res.data.content
      })
    },
    closeClear () {
      this.$emit('input', false)
      this.resetForm('ruleForm')
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.submitLoading = true
          if (this.title) {
            // 修改IP
            this.editPostFrom()
          } else {
            // 新增IP
            this.addPostFrom()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addPostFrom () {
      let times = this.ruleForm.time.split(',')
      let arr = []
      times.forEach((v) => {
        let obj = v.split(' ')
        arr.push({
          startTime: obj[0],
          endTime: obj[1]
        })
      })
      let parame = {
        name: this.ruleForm.name,
        userIds: this.ruleForm.userIds,
        bettingAmount: this.ruleForm.bettingAmount,
        effectiveTime: arr,
        factor: parseInt(this.ruleForm.factor),
        interrupt: this.ruleForm.interrupt,
        quotaAmount: this.ruleForm.quotaAmount ? this.ruleForm.quotaAmount.split(',') : [],
        test: this.ruleForm.test
      }
      Api.addPlan(parame).then(res => {
        this.loading = false
        this.submitLoading = false
        if (res.code === 200) {
          this.msgSuccess('保存成功')
          this.closeClear()
          this.$parent.getList()
        }
      }).catch(e => {
        this.loading = false
        this.submitLoading = false
      })
    },
    editPostFrom () {
      let times = this.ruleForm.time.split(',')
      let arr = []
      times.forEach((v) => {
        let obj = v.split(' ')
        arr.push({
          startTime: obj[0],
          endTime: obj[1]
        })
      })
      let parame = {
        name: this.ruleForm.name,
        userIds: this.ruleForm.userIds,
        bettingAmount: this.ruleForm.bettingAmount,
        effectiveTime: arr,
        factor: parseInt(this.ruleForm.factor),
        interrupt: this.ruleForm.interrupt,
        quotaAmount: this.ruleForm.quotaAmount ? this.ruleForm.quotaAmount.split(',') : [],
        test: this.ruleForm.test
      }
      Api.editPlan(this.data.id, parame).then(res => {
        this.loading = false
        this.submitLoading = false
        if (res.code === 200) {
          this.msgSuccess('保存成功')
          this.closeClear()
          this.$parent.phoneBtnShow = false
          this.$parent.getList()
        }
      }).catch(e => {
        this.loading = false
        this.submitLoading = false
      })
    }
  },
  watch: {
    value (nv) {
      this.showBlogForm = nv
      if (nv) {
        // 判斷是否編輯或新增
        this.title = false
        if (this.data.id) {
          this.title = true
          let ids = []
          this.data.users.forEach((v) => {
            ids.push(v.id)
          })
          this.ruleForm = {
            name: this.data.name,
            userIds: ids,
            bettingAmount: this.data.bettingAmount,
            effectiveTime: this.data.effectiveTime,
            factor: this.data.factor,
            interrupt: this.data.interrupt,
            time: this.data.effectiveTime,
            quotaAmount: this.data.quotaAmount && this.data.quotaAmount.toString(),
            test: this.data.test
          }
        } else {
          this.ruleForm = {
            name: '',
            userIds: '',
            bettingAmount: 2,
            endTime: '',
            startTime: '',
            factor: 2,
            interrupt: 4,
            quotaAmount: '',
            test: true
          }
        }
      } else {
        this.title = false
        this.loading = false
        this.submitLoading = false
      }
    }
  }
}
</script>
